<template>
  <div class="journalingContent">
    <!-- 审核进度区域 -->
    <div class="journalingHead" v-loading="loadingHead1">
      <div class="headNav">
        <div class="txt1">{{ pageTypeName[pageType - 1] }}进度</div>
        <div class="btn default" :class="{
          stss1: financeData.auditStatus == 0,
          stss2: financeData.auditStatus == 100,
          stss3: financeData.auditStatus == 101,
        }">
          {{ journTypeArr[financeData.auditStatus] }}
        </div>

        <div class="point" v-if="failMsg">驳回原因：{{ failMsg || '暂无' }}</div>
        <!-- <span class="czSpan" @click="journalingApproveShowFun"> 审核记录 </span> -->
      </div>
      <div class="tipText" v-if="axhFinance.fbStatus">二次修改审核</div>
      <div class="stepsNav" v-loading="stepItemShow">
        <!-- * 0 等待审核（蓝色） wait 属性
        * 1 等待审核（灰色）
        * 2 已通过审核
        * 3 当前阶段已被驳回 -->
        <div class="stepItem" v-for="(item, index) in axhAuditFinanceLogVos" :key="index">
          <div class="stepNum">
            <div class="iconOrder state0" style="color: #2c83e4" v-if="item.wait == 0">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state1" style="color: #d8d8d8" v-if="item.wait == 1">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state2" style="color: #2c83e4" v-if="item.wait == 2">
              {{ index + 1 }}
            </div>
            <img v-if="item.wait == 3" src="@/assets/image/close3.png" />
            <template v-if="!(index + 1 == axhAuditFinanceLogVos.length)">
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 0"></div>
              <div class="iconLine"
                v-if="axhAuditFinanceLogVos[index + 1].wait == 1 || axhAuditFinanceLogVos[index + 1].wait == null"></div>
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 2"></div>
              <div class="iconLine state3" v-if="axhAuditFinanceLogVos[index + 1].wait == 3"></div>
            </template>
          </div>
          <div class="stepCont">
            <div class="tit"
              :class="{ c00: item.wait == '0', c11: item.wait == '1', c00: item.wait == '2', c33: item.wait == '3' }">
              {{ item.username }}
            </div>
            <p :class="(item.wait == '0' || item.wait == '2') ? 'c00' : item.wait == '1' ? 'c11' : 'c33'">
              {{ item.waitStr }}
            </p>
            <p>{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作按钮区域 -->
    <div class="btnContent">
      <div class="titleMsgBox" v-if="operationType == 1">
        <div class="title line-3">{{ financeData.title }}</div>
        <div class="ttxx" v-if="systemTypeValue">类型：{{ systemTypeValue }}</div>
        <div class="ttxx"> {{ formatDate(financeData.createTimeNew, "yyyy年MM月dd日 hh:mm") }} </div>
      </div>
      <div class="titleMsgBox" v-if="operationType == 2">
        <el-form inline>
          <el-form-item label="标题: ">
            <el-input style="width: 199px;" maxlength="50" v-model="financeData.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="类型: " v-if="oneTypeList && oneTypeList.length">
            <el-select v-model="financeData.systemTypeId" placeholder="请选择">
              <el-option v-for="item in oneTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间: ">
            <el-date-picker :clearable="false" v-model="financeData.createTimeNew" type="datetime" placeholder="请选择"
              format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-form>
      </div>
      <div class="rightCont">
        <!-- 当前报表的状态 - financeStatus
        1、已通过
        0、审核中
        2、驳回
        -1、草稿 -->
        <!-- 跨级查看审批表时无法去进行操作 -->
        <template v-if="!(btnControl.isCaoGao == 0 && btnControl.isDel == 0 && btnControl.isPublic == 0 && btnControl.isSave == 0 && btnControl.isSubmit == 0 && btnControl.isSuccess == 0 && btnControl.isTurn == 0)">
          <div class="btn info" v-if="financeData.auditStatus == -1 && operationType == 1" @click="editAddArticle">
            <img class="img" src="@/assets/image/jourBtn2.png" alt="" />
            编辑
          </div>
          <div class="btn info" v-if="financeData.auditStatus == -1 && operationType == 2" @click="saveReport">
            <img class="img" src="@/assets/image/jourBtn1.png" alt="" />
            保存
          </div>
          <div class="btn info" v-if="financeData.auditStatus == -1 && operationType == 2" @click="operationType = 1">
            <img class="img" src="@/assets/image/jourBtn2.png" alt="" />
            取消
          </div>
        </template>
        <div class="btn info" v-if="btnControl && btnControl.isSubmit && operationType == 1" @click="setSubmitAudit">
          <img class="img" src="@/assets/image/jourBtn1.png" alt="" />
          提交审核
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isDel" @click="deleteReport">
          <img class="img" src="@/assets/image/jourBtn3.png" alt="" />
          删除
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isCaoGao" @click="transferDraft">
          <img class="img" src="@/assets/image/jourBtn2.png" alt="" />
          转为草稿
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isPublic"
          @click="publiceArticleStatus(financeData.isPublic)">
          <img class="img" src="@/assets/image/jourBtn3.png" alt="" />
          {{ financeData.isPublic == 1 ? '取消公开' : '公开' }}
        </div>
        <div class="btn success" v-if="btnControl && btnControl.isSuccess" @click="agreePassAudit(1)">通过</div>
        <div class="btn warning" v-if="btnControl && btnControl.isSuccess" @click="openRefuseAuditWin">驳回</div>
      </div>
    </div>

    <div class="previewMsgBox" v-if="operationType == 1">
      <div class="htmlCont" v-html="financeData.content"></div>
    </div>
    <div class="previewMsgBox" v-if="operationType == 2">
      <div class="operationBox" style="border: 1px solid #D8D8D8;">
        <notes style="min-height: 500px;" :toolOptions="toolbarOptions" class="topic_note" ref="answerRemarkRef"
          :content="financeData.content" @changeText="changeContentVillage"></notes>
      </div>
    </div>


    <!-- 拒绝理由弹出 -->
    <el-dialog :close-on-click-modal="false" v-model="refuseAuditVisible" title="拒绝理由" width="40%">
      <el-form label-width="100px">
        <el-form-item label="拒绝理由: ">
          <el-input type="textarea" :rows="5" show-word-limit maxlength="255" placeholder="请输入拒绝理由" style="width: 90%"
            v-model="refuseMsg"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="refuseAuditVisible = false">取消</el-button>
          <el-button type="primary" @click="agreePassAudit(0)"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 审批操作日志窗口 -->
    <!-- <el-dialog :close-on-click-modal="false" v-model="journalingApproveShow" width="520px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">审核记录</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <div class="approveWin">
          <div :key="index" v-for="(item, index) in findAuditLogRecordList" class="stepItem">
            <div class="stepNum">
              <div class="iconOrder">
                {{ findAuditLogRecordList.length - index }}
              </div>
              <template v-if="!(index + 1 == findAuditLogRecordList.length)">
                <div class="iconLine"></div>
              </template>
            </div>
            <div class="stepCont">
              <div class="tit">
                <span style="color: #35353f">{{ item.logContent }}</span>
                <el-popover v-if="item.isTurn === 1" placement="bottom" :width="200" trigger="hover"
                  :content="item.remark">
                  <template #reference>
                    <img class="spanIcon" src="@/assets/image/jourTip2.png" alt="" />
                  </template>
                </el-popover>
              </div>
              <p>{{ item.createTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import Notes from '@/components/Notes.vue'
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  ['image'], // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'financeJournaling2',
  components: {
    Notes,
  },
  data() {
    return {
      fromTo: '',
      financeId: '',
      pageType: '',
      btnShowType: '',
      journalingApproveShow: false,
      findAuditLogRecordList: [],
      currentTabIndex: '',
      loadingHead1: false,
      pageTypeName: ['镇级党务公开审核', '镇级政务公开审核', '镇级财务公开审核', '党务公开审核', '村务公开审核', '财务公开审核', '资金管理审核', '资源管理审核', '资产管理审核'],
      operationType: 1, // 1 保存 2 编辑
      journTypeArr: {
        '-1': '草稿',
        '0': '审核中',
        '100': '已通过',
        '101': '已拒绝',
      },
      typeJsonMap: {
        1: 1,
        2: 2,
        4: 3,
        5: 4,
      },
      stepItemShow: false,
      financeData: {},
      axhAuditFinanceLogVos: [],
      btnControl: {},
      refuseAuditVisible: false,
      failMsg: '',
      refuseMsg: '',
      axhFinance: {},
      journalingApproveShowLoading: false,
      financeImgList: [],
      financeBtnVo: {},
      isEditReport: false,
      oneTypeList: [],
      systemTypeValue: '',
      addressType: '',
    }
  },
  activated() {
    let query = this.$route.query
    // if (this.fromTo != query.fromTo || this.financeId != query.id || this.pageType != query.pageType || this.btnShowType != query.btnShowType) {
    this.fromTo = query.fromTo
    this.financeId = query.id
    this.pageType = query.pageType
    this.btnShowType = query.btnShowType
    this.getFinanceDetail()
    // }
  },
  methods: {
    // 通过文章id查询文章详情
    getFinanceDetail() {
      this.stepItemShow = true
      this.$http.post(`/axh/articleManage/findNewsByOne/${this.financeId}/${this.btnShowType}`).then((res) => {
        if (res && res.result) {
          this.financeData = res.result.news
          this.axhAuditFinanceLogVos = res.result.process
          this.btnControl = res.result.btn
          this.failMsg = res.result.failMsg
          this.stepItemShow = false
          if (res.result.news && res.result.news.systemTypeId) {
            this.getNewTypeList()
          }
        }
      })
    },

    // 打开拒绝弹出
    openRefuseAuditWin() {
      this.refuseMsg = ''
      this.refuseAuditVisible = true
    },
    // 同意拒绝报表审核 1同意 0拒绝
    agreePassAudit(type) {
      if (type == 1) {
        ElMessageBox.confirm('是否通过该报表的审核?', '警告', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.agreePassAuditApi(type)
          })
          .catch(() => {
          })
      } else {
        if (!this.refuseMsg) {
          ElMessage.error('请输入拒绝理由')
          return
        }
        this.agreePassAuditApi(type)
      }
    },
    // 同意拒绝报表审核 接口调用
    agreePassAuditApi(type) {
      this.$http.post('/axh/news/audit-news', {
        newsIds: this.financeId,
        isConsent: type,
        failMsg: this.refuseMsg
      }).then((res) => {
        if (res && res.result) {
          ElMessage.success('操作成功')
          this.goBackAndRefresh()
        }
      })
    },
    // 审核记录
    journalingApproveShowFun() {
      ElMessage.success('审核记录窗口')
      // this.journalingApproveShow = true
      // this.journalingApproveShowLoading = true
      // this.$http
      //   .post('/axh/findAuditLogRecord', {
      //     financeId: this.financeId,
      //   })
      //   .then((res) => {
      //     if (res && res.result) {
      //       this.journalingApproveShowLoading = false
      //       this.findAuditLogRecordList = res.result
      //     }
      //   })
    },
    // close() { },

    // 保存草稿
    saveReport() {
      if (!this.financeData.title) {
        ElMessage.info('内容标题不能为空')
        return
      }
      if (!this.financeData.createTimeNew) {
        ElMessage.info('内容时间不能为空')
        return
      }
      if (!this.financeData.systemTypeId) {
        ElMessage.info('所属分类不能为空')
        return
      }
      if (!this.financeData.content) {
        ElMessage.info('文章内容不能为空')
        return
      }
      this.$http.post('/axh/articleManage/updateArticle', {
        id: this.financeId,
        title: this.financeData.title,
        systemTypeId: this.financeData.systemTypeId,
        content: this.financeData.content,
        createTime: this.formatDate(this.financeData.createTimeNew),
        contentType: this.typeJsonMap[this.pageType],
      }).then((res) => {
        if (res && res.result) {
          this.operationType = 1
          this.getFinanceDetail()
          ElMessage.success('操作成功')
        }
      })
    },

    // 提交审核
    setSubmitAudit() {
      ElMessageBox.confirm('是否提交审核吗?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post('/axh/articleManage/submitAudit', {
          contentId: this.financeId,
          type: this.typeJsonMap[this.pageType],
        }).then((res) => {
          if (res && res.result) {
            ElMessage.success('提交成功')
            this.getFinanceDetail()
          }
        })
      })
    },

    // 删除报表
    deleteReport() {
      ElMessageBox.confirm('是否删除该报表?', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post(`/axh/articleManage/removeNews/${this.financeId}`).then((res) => {
          if (res && res.result) {
            ElMessage.success('删除成功')
            this.goBackAndRefresh()
          }

        })
      })
    },
    // 转化为草稿
    transferDraft() {
      let typeJsonMap = {
        1: 1,
        2: 2,
        4: 3,
        5: 4,
      }
      this.$http.post('/axh/articleManage/convertDrafts', { contentId: this.financeId, type: typeJsonMap[this.pageType] }).then((res) => {
        if (res && res.result) {
          ElMessage.success('操作成功')
          this.getFinanceDetail()
        }
      })
    },

    // 设置是否公开
    publiceArticleStatus(isPublic) {
      let tipText = isPublic == 0 ? '是否公开该文章吗?' : '是否取消公开该文章吗?'
      ElMessageBox.confirm(tipText, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http.post('/axh/articleManage/publicContent', { contentId: this.financeId, type: this.typeJsonMap[this.pageType] }).then((res) => {
          if (res && res.result) {
            ElMessage.success('操作成功')
            this.getFinanceDetail()
          }
        })
      })
    },

    // 页面返回并刷新
    goBackAndRefresh() {
      this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
        this.$router.go(-1)
      })
    },
    // 查询分类类型列表
    getNewTypeList() {
      this.$http.post('/axh/newType/listById?id=' + this.pageType).then((res) => {
        this.oneTypeList = res.result
        this.systemTypeValue = res.result.filter((v) => {
          return v.id == this.financeData.systemTypeId
        })[0].name
      })
    },
    // 编辑
    editAddArticle() {
      this.operationType = 2
      setTimeout(() => {
        if (this.$refs.answerRemarkRef) {
          this.$nextTick(() => {
            this.$refs.answerRemarkRef.setContent(this.financeData.content)
          })
        }
      }, 100)
    },
    //修改富文本
    changeContentVillage(e) {
      this.financeData.content = e.content
    },
  }
}
</script>
<style lang="scss" scoped>
.journalingContent {
  padding: 20px;

  .journalingHead {
    background-color: $bgColorFFFFFF;
    margin-bottom: 20px;

    .headNav {
      position: relative;
      display: flex;
      padding: 16px;
      border-bottom: 1px solid #d8d8d8;

      // align-items: center;
      .txt1 {
        font-weight: 600;
        font-size: 18px;
        margin-right: 16px;
        line-height: 30px;
      }

      .btn {
        min-width: 52px;
        background: $bgColorEDEDED;
        color: $color999999;
        border: none;
        height: 30px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 16px;
      }

      .stss1 {
        width: auto;
        color: #3abf70;
        background: #d9f7e5;
      }

      .stss2 {
        width: auto;
        color: #ed7b07;
        background: #fff2e5;
      }

      .stss3 {
        color: #f05e5e;
        background: #ffecec;
        width: auto;
      }

      .point {
        color: $colorF05E5E;
        font-size: 16px;
        padding-top: 3px;
        max-width: 620px;
      }

      .czSpan {
        position: absolute;
        cursor: pointer;
        font-size: 16px;
        top: 25px;
        right: 16px;
        line-height: 18px;
        color: $color2C83E4;
        border-bottom: 1px solid $color2C83E4;
      }
    }

    .tipText {
      font-weight: 600;
      font-size: 16px;
      margin-left: 16px;
      margin-top: 10px;
      line-height: 30px;
      color: rgb(212, 91, 4);
    }

    .stepsNav {
      display: flex;
      padding: 20px 0 30px 0;
      min-height: 152px;
      justify-content: center;
      margin-right: -180px;

      .stepItem {
        .stepNum {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          img {
            width: 40px;
            height: 40px;
          }

          .iconLine {
            width: 200px !important;
            height: 0px;
            border-bottom: 2px solid #d8d8d8;
          }

          .iconOrder {
            width: 40px;
            height: 40px;
            font-size: 18px;
            display: flex;
            color: $color2C83E4;
            align-items: center;
            justify-content: center;
            background: #e6f0fc;
            border-radius: 50%;
            border: 2px solid #2c83e4;
          }
        }

        .stepCont {
          color: #a8a8a8;
          text-align: center;
          transform: translateX(-100px);
          padding: 0 10px;
          width: 240px;

          .tit {
            font-size: 16px;
            color: #2c83e4;
            margin-bottom: 5px;
          }

          p {
            color: #a8a8a8;
            font-size: 12px;
          }
        }
      }
    }
  }

  .btnContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .titleMsgBox {
      width: 48%;
      padding-right: 24px;
      padding-left: 4px;

      .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 6px;
      }

      .ttxx {
        display: flex;
        font-size: 14px;
        color: #666;
        margin-right: 14px;
      }
    }

    .rightCont {
      display: flex;

      .btn {
        width: 100px;
        margin-left: 18px;

        .img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
      }
    }
  }

  .state1 {
    color: #a8a8a8 !important;
    border-color: #a8a8a8 !important;
  }

  .state3 {
    color: #f05e5e !important;
    border-color: #f05e5e !important;
  }

  .state0 {
    color: #2c83e4 !important;
    border-color: #2c83e4 !important;
  }

  .labelBtn {
    padding-top: 0;
  }

  .c00 {
    color: #2c83e4 !important;
  }

  .c11 {
    color: #a8a8a8 !important;
  }

  .c22 {
    color: #35353f !important;
  }

  .c33 {
    color: #f05e5e !important;
  }
}

.previewMsgBox {
  padding: 24px 46px;
  background: #fff;

  .operationBox {
    width: 800px;
    margin: 0 auto;
  }

  .htmlCont {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;

    /deep/ img {
      max-width: 100%;
      max-height: 100%;
    }

    /deep/ p {
      word-wrap: break-word;
    }
  }
}
</style>
